<template>
  <div>
    <!--面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>客户类型列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- 卡片视图区 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="dialogFormVisible = true" :disabled="extent">添加客户类型</el-button>
        </el-col>
      </el-row>

      <el-table :data="usertypelist" style="width: 100%" border stripe>
        <el-table-column prop="userTypeId" label="客户类型id">
        </el-table-column>
        <el-table-column prop="userTypeName" label="客户类型">
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加客户类型的模态框 -->
    <el-dialog title="添加客户类型" :visible.sync="dialogFormVisible">

      <el-form :model="form" label-width="100px" :rules="rules" ref="typeFormrule">
        <el-form-item label="客户类型" prop="userTypeName">
          <el-input v-model="form.userTypeName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addusertype">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
export default {
  data() {
    return {
      //客户类型列表
      usertypelist: [],
      //打开模态框
      dialogFormVisible: false,
      //用户输入表单
      form: {
        userTypeName: "",
      },
      //效验规则
      rules: {
        userTypeName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      //执行权限
      extent: false,
    };
  },
  created() {
    //如果checkFlag不等于2没有权限执行
    let checkFlag = window.sessionStorage.getItem("checkFlag");
    if (checkFlag != 2) {
      this.extent = true;
    }
    this.getusertype();
  },
  methods: {
    //获取客户类型列表
    async getusertype() {
      const { data: res } = await this.$http.post(
        "admin/get_user_type.php",
        ""
      );
      if (res.code !== 0) return this.$message.error("获取客户类型列表失败");
      this.usertypelist = res.data;
    },
    //添加客户类型
    addusertype() {
      this.$refs.typeFormrule.validate(async (valid) => {
        // if (this.form.userTypeName == "")
        //   return this.$message.error("请输入内容");
        if (valid) {
          const { data: res } = await this.$http.post(
            "admin/add_user_type.php",
            this.form
          );
          if (res.code !== 0) return this.$message.error("添加失败");
          this.$message.success("添加成功");
          this.dialogFormVisible = false;
          this.getusertype();
        }
      });
    },
  },
};
</script>

<style>
</style>